<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="model-ctrl-body" v-show="AddSentimentModelObj.isShow">
      <div class="model-ctrl-main odd-row-ctrl sentiment-dialog">
        <div class="model-title">
          <p>新建舆情</p>
        </div>
        <div class="model-center">
          <div class="modal-ctrl-content clearfloat">
            <div class="model-center-title first-title">
              <div>填写舆情基本信息</div>
            </div>
            <div class="model-row">
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  <i class="must"></i>舆情标题：
                </div>
                <input type="text"
                       placeholder="请输入标题"
                       class="model-text f-l">
              </div>
              <div class="model-even-row">
                <div class="model-form-key">
                  发帖人昵称：
                </div>
                <input type="text"
                       class="model-text">
              </div>
              <div class="model-even-row model-even-row-right">
                <div class="model-form-key">
                  发帖人账号ID：
                </div>
                <input type="text"
                       class="model-text">
              </div>
              <div class="model-even-row">
                <div class="model-form-key">
                  发帖时间：
                </div>
                <div class="input-group date time-item model-text" id="postingTime">
                  <input type="hidden" ref="postingTimeRef" name="birthday">
                  <input type="text" ref="postingTimeRef" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
                  <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
                </div>
              </div>
              <div class="model-even-row model-even-row-right">
                <div class="model-form-key">
                  账号注册地：
                </div>
                <input type="text"
                       class="model-text">
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  <i class="must"></i>舆情原文：
                </div>
                <textarea class="model-text f-l model-textarea"
                          placeholder="请输入内容"></textarea>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  <i class="must"></i>关键词：
                </div>
                <keySelect class="model-text ps-rel f-l"></keySelect>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  上传附件：
                </div>
                <div class="model-text f-l uplode-wrap">
                  <div class="alert-msg">（ 支持图片/视频/文档 ）</div>
                  <div class="uplode-detail">
                    <div class="uplode-btn f-l"></div>
                    <div class="uplode-item">
                      <img class="f-l" :src="'static/img/uplode_pre_dom.png'" alt="">
                      <div class="uplode-file-msg ps-rel">
                        <div class="uplode-file-name ">xxxxx.txt</div>
                        <div class="uplode-file-btn-wrap pointer">
                          <div class="f-l">下载（2.12M）|</div>
                          <div class="uplode-file-cancel f-l">删除</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="model-even-row">
                <div class="model-form-key">
                  采集来源：
                </div>
                <div class="model-select mut-select">
                  <el-select
                    v-model="AddDataObj.collectionSource.valueKey123"
                    collapse-tags
                    placeholder="请选择">
                    <el-option
                      v-for="item in AddDataObj.collectionSource.list"
                      :key="item.dicKey"
                      :label="item.dicValue"
                      :value="item.dicKey">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div v-for="(item, index) in selectSourceList" :key="item.type"
                   :class="{'model-even-row-right': index%2 === 0}"
                class="model-even-row">
                <div class="model-form-key">
                  <i class="must" v-show="item.type === 8"></i>{{item.title}}
                </div>
                <div class="model-select mut-select">
                  <selectSource :selectObj="item"
                                @selectFn="selectFn"></selectSource>
                </div>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  事件地点：
                </div>
                <input type="text"
                       disabled
                       v-model="AddDataObj.mapData.address"
                       placeholder="点击右侧按钮，选则地图定位"
                       class="model-text f-l">
                <button class="map-location-btn pointer" @click="closeMap">地图定位</button>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  URL地址：
                </div>
                <input type="text"
                       v-model="config.value"
                       placeholder="请输入URL地址，点击按钮生成二维码"
                       class="model-text f-l">
                <button class="two-dimensional-btn ps-rel pointer" @click="twoDimensionalFn">
                  生成二维码
                  <div class="key-select-bg" v-show="isTwoDimensional" @click.stop="twoDimensionalFn"></div>
                  <vue-q-art class="two-dimensional-content"
                             v-show="isTwoDimensional"
                             :config="config"></vue-q-art>
                </button>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  备注：
                </div>
                <textarea class="model-text f-l model-textarea"
                          placeholder="请输入内容"></textarea>
              </div>
              <div class="model-even-row">
                <div class="model-form-key">
                  发布人：
                </div>
                <input type="text"
                       class="model-text">
              </div>
              <div class="model-even-row model-even-row-right">
                <div class="model-form-key">
                  联系电话：
                </div>
                <input type="text"
                       placeholder="请填写发布人联系电话"
                       class="model-text">
              </div>
            </div>
          </div>
          <div class="modal-ctrl-content clearfloat">
            <div class="model-center-title two-title">
              <div>编辑研判</div>
            </div>
            <div class="model-row">
              <div class="model-even-row">
                <div class="model-form-key">
                  <i class="must"></i>舆情性质：
                </div>
                <div class="model-select mut-select">
                  <el-select
                    v-model="AddDataObj.property.valueKey123"
                    collapse-tags
                    placeholder="请选择">
                    <el-option
                      v-for="item in AddDataObj.property.list"
                      :key="item.dicKey"
                      :label="item.dicValue"
                      :value="item.dicKey">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="model-even-row model-even-row-right">
                <div class="model-form-key">
                  <i class="must"></i>舆情级别：
                </div>
                <div class="model-select mut-select">
                  <el-select
                    v-model="AddDataObj.level.valueKey123"
                    collapse-tags
                    placeholder="请选择">
                    <el-option
                      v-for="item in AddDataObj.level.list"
                      :key="item.dicKey"
                      :label="item.dicValue"
                      :value="item.dicKey">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="model-odd-row">
                <div class="model-form-key f-l">
                  <i class="must"></i>舆情分类：
                </div>
                <div style="width: 100%">
                  <ul class="classify-ul">
                    <li v-for="item in AddDataObj.classify.list" :key="item.dicKey"
                        class="classify-li">
                      <label class="checkbox-label">
                        <input
                          class="input_agreement_protocol"
                          type="checkbox"
                          :checked="item.isChecked"
                          @click="classifyCheckedOne(item)"/>
                        <span></span>
                        <span class="checkbox-text" v-text="item.dicValue"></span>
                      </label></li>
                  </ul>
                </div>
              </div>
              <div class="model-odd-row jus-center">
                <button type="button" class="btn btn-default btn-wpf-dialog-close" @click="close">取消</button>
                <button type="button" class="btn btn-default btn-wpf-dialog-close" @click="subBtn">确定</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="model-ctrl-main map-ctrl" v-if="mapModelObj.isShow">
        <div class="model-title">
          <p>地图定位</p>
        </div>
        <div class="model-ctrl-content">
          <div class="map-body">
            <baseMap @mapLocationFn="mapLocationFn"></baseMap>
          </div>
        </div>
        <div class="btns jus-center">
          <button type="button" class="btn btn-default btn-wpf-dialog-close" @click="closeMap">取消</button>
          <button type="button" class="btn btn-default btn-wpf-dialog-close" @click="subBtnMap">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import keySelect from '@/components/select/keySelect'
import selectSource from '@/components/select/selectSource'
import baseMap from '@/components/map/baseMap'
import VueQArt from 'vue-qart'
export default {
  name: 'AddSentiment',
  props: ['AddSentimentModelObj'],
  data () {
    return {
      postingTime: '', // 发帖时间
      selectSourceList: [
        {
          type: 8,
          title: '按事件性质：'
        }, {
          type: 9,
          title: '按敏感因素：'
        }, {
          type: 11,
          title: '按媒体介入：'
        }, {
          type: 10,
          title: '按领导批示：'
        }, {
          type: 12,
          title: '地点类型：'
        }
      ],
      selectedObj: {
        selected8: [], // 按事件性质
        selected9: [], // 按敏感因素
        selected11: [], // 按媒体介入
        selected10: [], // 按领导批示
        selected12: [] // 地点类型
      },
      mapModelObj: {
        isShow: false
      },
      openMapContentIsShow: false,
      AddDataObj: {
        mapData: {
          address: '',
          point: []
        },
        collectionSource: { // 采集来源
          type: 1,
          valueKey123: undefined,
          list: []
        },
        property: { // 舆情性质
          type: 3,
          valueKey123: undefined,
          list: []
        },
        level: { // 舆情级别
          type: 6,
          valueKey123: undefined,
          list: []
        },
        classify: { // 舆情分类 多选
          type: 4,
          list: []
        }
      },
      mapMsg: {
        address: '',
        point: []
      },
      isTwoDimensional: false, // 是否显示二维码
      AddData: {
        name: '', // 标签名称
        key: '', // 标签标识
        type: '', // 标签类型
        parentId: '' // 父节点id
      },
      spanShow: false,
      config: {
        value: '',
        imagePath: require('@/assets/img/two_dimensional_bg.png'),
        filter: 'color'
      }
    }
  },
  components: {
    keySelect,
    selectSource,
    baseMap,
    VueQArt
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 初始化时间
      this.postingTime = new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString().replace('T', ' ').split('.')[0]
      // 初始化时间控件
      this.initTimeControl()
      this.initSelectData()
    },
    // 时间控件初始化
    initTimeControl () {
      let self = this
      /* eslint-disable */
      $(function () {
        $('#postingTime').datetimepicker({
          language: 'zh-CN',
          format: 'yyyy-mm-dd hh:ii:ss',
          endDate: new Date(),
          // minView: "month",
          autoclose: true
        }).on('changeDate', function (ev) {
          self.postingTime =  self.$refs.postingTimeRef.value
        console.log(self.postingTime)
        })
        self.$refs.postingTimeRef.value = self.postingTime
      })
    },
    initSelectData () {
      this.getSelectList(this.AddDataObj.collectionSource, '采集来源');
      this.getSelectList(this.AddDataObj.property, '舆情性质');
      this.getSelectList(this.AddDataObj.level, '舆情级别');
      this.getSelectList(this.AddDataObj.classify, '舆情分类');
    },
    getSelectList (item,str) {
      this.$axios({
        url: this.Monitor
          + '/dic/type/'
          + item.type,
        method: 'get'
      })
        .then(res => {
          if (item.type === 4){
            let _list = []
            res.data.data.map(i => {
              _list.push({
                dicKey: i.dicKey,
                dicSort: i.dicSort,
                dicType: i.dicType,
                dicValue: i.dicValue,
                isChecked: false,
              })
            })
            item.list = _list
          } else {
            item.list = res.data.data
          }
          console.log(item.list)
        })
        .catch(err => {
          console.log(str, err)
        })
    },
    // 多选下拉事件
    selectFn (data) {
      this.selectedObj['selected' + data.type] = data.val
      console.log(this.selectedObj)
    },
    // 地图
    closeMap () {
      this.mapModelObj.isShow = !this.mapModelObj.isShow;
    },
    // 地图
    subBtnMap () {
      if(this.mapMsg && this.mapMsg.address.length > 0 && this.mapMsg.point.length > 0){
        this.AddDataObj.mapData.address = this.mapMsg.address
        this.AddDataObj.mapData.point = this.mapMsg.point
        this.closeMap()
      } else {
        this.s_alert('请正确地图定位，再点击确认')
        return false
      }
    },
    // 地图打点后的数据
    mapLocationFn (msg) {
      this.mapMsg = msg
    },
    // 点击生成二维码函数
    twoDimensionalFn (msg) {
      this.isTwoDimensional = !this.isTwoDimensional
      console.log(this.config.value,  this.isTwoDimensional, msg)
    },
    // classifyCheckedOne
    classifyCheckedOne (obj) {
      obj.isChecked = !obj.isChecked
      console.log(obj)
      console.log(this.AddDataObj.classify.list)
    },
    // 提交
    subBtn () {
      console.log(this.AddData)
      if (this.spanShow) {
        this.s_alert('key重复不能新增！')
        // alert('标签标识重复不能新增');
        return false
      }
      if (this.verifyForm.isNull(this.AddData.name)) {
        this.s_alert('value不能为空！')
        // alert("标识名称不能为空！");
        return false
      }
      if (this.verifyForm.isNull(this.AddData.key)) {
        this.s_alert('key不能为空！')
        // alert("标签标识不能为空！");
        return false
      }
      if (this.verifyForm.isNull(this.AddData.type)) {
        this.s_alert('type不能为空！')
        // alert("标签类型不能为空！");
        return false
      }
      this.AddData.parentId = this.AddSentimentModelObj.parentId
      let url = this.Dictionary + '/tag'
      this.$axios({
        url: url,
        data: this.AddData,
        method: 'post'
      })
        .then(res => {
          console.log(res)
          this.s_alert('新增成功！')
          this.s_logwrite('基础信息管理-字典管理', '新增字典标签')
          // alert("新增成功！");
          this.close()
        })
        .catch(res => {
          this.s_alert('新增失败！')
          // alert("新增失败！");
          console.log(res)
        })
    },
    // 字典标识 code 失去焦点
    blur () {
      this.$axios({
        url: this.Dictionary +
          '/tag/selectKey?key=' +
          this.AddData.key,
        method: 'get'
      })
        .then(res => {
          this.spanShow = !res.data
          console.log(res.data)
        })
        .catch(err => {
          console.log(err, ' key 唯一性')
        })
    },
    // 关闭弹窗
    close () {
      this.$emit('AddSentimentModelClose')
      this.clearData() // 关闭弹窗清除数据
    },
    // 清除数据
    clearData () {
      this.AddData = {
        name: '', // 标签名称
        key: '', // 标签标识
        type: '', // 标签类型
        parentId: '' // 父节点id
      }
      this.spanShow = false
    }
  }
}
</script>
